<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <div id="box">
		        <!-- 
		            v-model绑定一个uname状态
		            父组件中的uname模板状态可以接收到子组件中input的value值 
		        -->
		        <my-input type="text" title="姓名" v-model="uname"></my-input>
		        <my-input type="password" title="密码" v-model="pass"></my-input>
		        <my-input type="number" title="电话" v-model="phone"></my-input>
		
		        <button type="提交" @click="registerClick">register</button>
		        <button type="重置" @click="clearClick">reset</button>
		    </div>
		        
		    <script>
		        Vue.component("myInput",{//、、、、、
		            template : `
		                <div>
		                    <label>{{title}}</label>
		                    <input :type="type" @input="handleInput" :value="value"/>
		                </div>
		            `,
		            //props直接绑定value，可以与组件实例中的属性v-model关联
		            props : ["type","title","value"],
		            methods : {
		                handleInput(eve){
		                    //console.log(eve.target.value);
		                    //分发一个input事件，将改变后的value传递出去
		                    //父组件因为v-model的双向数据绑定关系，可以直接获取到对应的内容
		                    this.$emit("input",eve.target.value);
		                }
		            }
		        })
		        var vm = new Vue({
		            el : "#box",
		            data : {
		                uname : "",
		                pass : "",
		                phone : 0
		            },
		            methods : {
		                registerClick(){//点击获取所有字段的内容
		                    console.log(this.uname,this.pass,this.phone);
		                },
		                clearClick(){
		                    this.uname = "",
		                    this.pass = "",
		                    this.phone = ""
		                }
		            }
		        })
		    </script>
	</body>
</html>
